<template>
  <div class="page-env-detail">
    <div class="env-head">
      <div class="env-title f-nowrap">
        <span @click="envDetail">
          <img src="/images/env-dark.png" /> {{envName}}
        </span>
      </div>
      <Menu mode="horizontal" theme="light" :active-name="menuActiveName" @on-select="selectMenu" class="env-menu" ref="menu">
        <MenuItem :name="menu.id" v-for="menu in menus" :key="menu.id">{{menu.name}}</MenuItem>
      </Menu>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
import EnvInfo from '@/components/environment/env-info'
import AccessRight from '@/components/environment/access-right'
import ConfigSet from '@/components/environment/config-set'
import Pvc from '@/components/environment/pvc'
import Docker from '@/components/environment/docker'
export default {
  name: 'EnvironmentDetail',
  components: { EnvInfo, AccessRight, ConfigSet, Pvc, Docker },
  data() {
    return {
      envName: '',
      menuActiveName: '',
      menus: [{
        id: 1,
        path: '/home/environment/:environmentId/info',
        name: '环境信息',
        active: 'info'
      }, {
        id: 2,
        path: '/home/environment/:environmentId/access-right',
        name: '访问权',
        active: 'access-right'
      }, {
        id: 3,
        path: '/home/environment/:environmentId/config-set',
        name: '配置集',
        active: 'config-set'
      }, {
        id: 4,
        path: '/home/environment/:environmentId/pvc',
        name: '存储卷',
        active: 'pvc'
      }, {
        id: 5,
        path: '/home/environment/:environmentId/docker',
        name: '镜像库',
        active: 'docker'
      }, {
        id: 6,
        path: '/home/environment/:environmentId/shop',
        name: '应用商店',
        active: 'shop'
      }]
    }
  },
  mounted() {
    this.envName = JSON.parse(localStorage.getItem('envionmentSelect')).environmentName
    // 处理页面刷新，tab选中位置问题
    let path = location.href
    for (let i = 0; i < this.menus.length; i++) {
      const menu = this.menus[i]
      if (path.indexOf(menu.active) !== -1) {
        this.menuActiveName = menu.id
      }
    }
  },
  methods: {
    envDetail() {
      this.$refs.menu.currentActiveName = 1
      this.$router.push('/home/environment/' + this.$route.params.environmentId + '/info')
    },
    selectMenu(index) {
      let path = this.menus[index - 1].path
      // 处理动态路由路径
      let dynamicList = path.match(/:(\w*)\//gi)
      if (dynamicList) {
        for (let i = 0; i < dynamicList.length; i++) {
          const dynamic = dynamicList[i]
          let dynamicId = dynamic.replace(/:(\w*)\//gi, '$1')
          path = path.replace(dynamic, this.$route.params[dynamicId] + '/')
        }
      }
      this.$router.push(path)
    }
  },
  watch: {
    $route(val) {
      let vm = this
      vm.$nextTick(function () {
        this.envName = JSON.parse(localStorage.getItem('envionmentSelect')).environmentName
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.env-head {
  position: fixed;
  top: 0;
  left: 272px;
  right: 180px;
  z-index: 99;
  .env-title {
    position: relative;
    z-index: 999;
    float: left;
    padding: 0 50px 0 3px;
    max-width: 240px;
    font-weight: bold;
    line-height: 60px;
    img {
      vertical-align: middle;
      height: 14px;;
    }
    span {
      cursor: pointer;
    }
  }
}
</style>
